<template>
    <div class="tpml">
      <div class="tpmlBox">
        <nav-bar title='商品列表' />
        <mt-loadmore  :auto-fill='false' :top-method="loadTop" :bottom-method="loadBottom" @top-status-change="handleTopChange" :bottom-all-loaded="allLoaded" @bottom-status-change="handleBottomChange" ref='loadmore' style='margin-bottom:55px' >
            <ul class="goods-list">
              <li v-for="goods in goodsList" :key='goods.id'>
                <router-link :to='{name:"goods.details",params:{id:goods.id}}'>
                    <img :src="goods.img_url" alt="">
                    <p>{{goods.title | converStr(80)}}</p>
                </router-link>
              </li>
            </ul>
            <div slot="top" class="mint-loadmore-top">
              <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
              <span v-show="topStatus === 'loading'">Loading...</span>
            </div>
        </mt-loadmore>
      </div>
    </div>
</template>
<script>
  export default {
    props: ['apprefs'],
    data() {
      return {
        topStatus: '',
        bottomStatus: '',
        page: 1,
        goodsList: [],
        allLoaded: false,
        boxHeight: 0,

        // ...
      };
    },
    created () {
        this.page = this.$route.query.id || 1;
        this.getGoodsListData();
    },
    mounted () {
      let appHeaderHeight = this.apprefs.appHeader.$el.offsetHeight;
      let appFooterHeight = this.apprefs.appFooter.$el.offsetHeight;
      this.boxHeight = document.body.clientHeight - appHeaderHeight - appFooterHeight;
    },
    methods: {
      getGoodsListData () {
        this.$axios.get(`${process.env.API_HOST}/getgoods?pageindex=${this.page}`)
        .then(res => {
            this.goodsList = res.data.message;
            this.page ++;
            this.$refs.loadmore.onTopLoaded();
        })
        .catch(err => console.log(err))
      },
      pullGetGoodsListData () {
        this.$axios.get(`${process.env.API_HOST}/getgoods?pageindex=${this.page}`)
        .then(res => {
            if(res.data.message.length == 0){
                this.allLoaded = true;
                this.$toast('暂无更多数据！！！');
            }
            this.goodsList = this.goodsList.concat(res.data.message);
            this.$refs.loadmore.onBottomLoaded(); //从新定位元素位置
            this.page ++;
        })
        .catch(err => console.log(err))
      },
      handleTopChange(status) {
        this.topStatus = status;
        // console.log(this.topStatus);
      },
      handleBottomChange(bottomStatus){
        this.bottomStatus = bottomStatus;
        console.log(bottomStatus);
      },
      loadTop(){
        this.page = 1;
        this.allLoaded = false;
        this.getGoodsListData ();
      },
      loadBottom () {
        this.pullGetGoodsListData();
        // console.log("上拉加载执行");
      }
      // ...
    },
    // ...
  };
</script>
<style scoped="">
    .tpml{
        height:100vh;
        padding-bottom: 45px;
        overflow: scroll;
    }
    .goods-list{
        width: 100%;
        padding: 5px 5px 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .goods-list li{
        width: 49%;
        height: 200px;
        border: 1px solid #ccc;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        margin-bottom: 5px;
    }
    .goods-list img{
        width: 100%;
    }
    .goods-list p{
        font-size: 14px;
    }
</style>